<template>
	<view class="detail page c00" v-if="detail != null">
		<view class="bgf7 p12">
			<view class="bgff px14 pb10">
				<view class="flex flexC borb py12" >
					<text class="flex1">门店ID</text>
					<text class="py3">{{detail.id}}</text>
					
				</view>
				<view class="flex flexC borb py12" @click="clickUpdate('name',detail.name)">
					<text class="flex1">门店名称</text>
					<text class="py3">{{detail.name}}</text>
					<text class="arrowR ml3"></text>
				</view>
				<view class="flex flexC borb py12" @click="chooseLocation">
					<text class="flex1">门店地址</text>
					<view class="w-10 flex flexC py3">
						<text class="flex1">{{detail.address}}</text>
						<text class="arrowR ml3"></text>
					</view>
				</view>
				<view class="flex flexC borb py12">
					<text class="flex1">负责人</text>
					<text class="py3">{{detail.username}}</text>
				</view>
				<view class="flex flexC borb py12">
					<text class="flex1">负责人电话</text>
					<text class="py3">{{detail.mobile}}</text>
				</view>
				<view class="flex flexC borb py12" @click="clickUpdate('tel',detail.tel)">
					<text class="flex1">客服</text>
					<text class="py3">{{detail.tel}}</text>
					<text class="arrowR ml3"></text>
				</view>
				<view class="flex flexC borb py12" @click="$refs.statusPop.open()">
					<text class="flex1">营业状态</text>
					<text class="py3">{{detail.status_txt}}</text>
					<text class="arrowR ml3"></text>
				</view>
				<view class="flex flexC borb py12" @click="$refs.cleanPop.open()">
					<text class="flex1">保洁是否可预订</text>
					<text class="py3">{{detail.clean_txt}}</text>
					<text class="arrowR ml3"></text>
				</view>
				
	
				<view class="flex flexC borb py12" @click="bindDoor(-1)">
					<text class="flex1">大门</text>
					<text class="py3" v-if="detail.device1 != null">{{detail.device1.device_sn}}</text>
					<text class="py3" v-else>未绑定设备</text>
					<text class="arrowR ml3"></text>
				</view>
				
				<view class="flex flexC borb py12" @click="bindDoor(-2)">
					<text class="flex1">大门2</text>
					<text class="py3" v-if="detail.device2 != null">{{detail.device2.device_sn}}</text>
					<text class="py3" v-else>未绑定设备</text>
					<text class="arrowR ml3"></text>
				</view>
				
				<view class="flex flexC borb py12" @click="bindDoor(-3)">
					<text class="flex1">大厅</text>
					<text class="py3" v-if="detail.device3 != null">{{detail.device3.device_sn}}</text>
					<text class="py3" v-else>未绑定设备</text>
					<text class="arrowR ml3"></text>
				</view>
				
				<view class="flex flexC borb py12" @click="clickUpdate('is_charge_tip',detail.is_charge_tip)">
					<text class="flex1">默认弹出充值框</text>
					<text class="py3">{{detail.is_charge_tip}}</text>
					<text class="arrowR ml3"></text>
				</view>
				
				<view class="flex flexC borb py12" @click="updateLogo">
					<text class="flex1">门店LOGO</text>
					<image class="w48" :src="detail.logo_url" mode="aspectFill"></image>
					<text class="arrowR ml3"></text>
				</view>
				
				<view class="flex flexC borb py12" @click="updateWx">
					<text class="flex1">店长微信码</text>
					<image class="w48" :src="detail.wx_code" mode="aspectFill"></image>
					<text class="arrowR ml3"></text>
				</view>
				
				
				<view class="flex flexC borb py12" @click="lookCode">
					<text class="flex1">店铺二维码</text>
					<image class="w48" :src="codeUrl" mode="aspectFill"></image>
					<text class="arrowR ml3"></text>
				</view>
				
				<view class="flex flexC borb py12" @click="lookChargeCode">
					<text class="flex1">充值二维码</text>
					<image class="w48" :src="chargeCodeUrl" mode="aspectFill"></image>
					<text class="arrowR ml3"></text>
				</view>
				
				<view class="flex flexS borb pb12 pt18">
					<text class="mr14 pt3">标签</text>
					<view class="flex flexC flexW flex1">
						<text @click="delTag(item)" v-for="(item,index) in detail.tagList" :key="index"
							class="bgf6 mb6 r40 px12 py4 mr6">{{item}}</text>
						<text class="bged mb6 r40 px15 py4" @click="addTag">添加</text>
					</view>
				</view>
				<view class="pt12">
					<text class="mr14 pt3">门店相册</text>
					<view class="flex flexC flexW mt12">
						<view class="imgbox r4 mr14 mb10" v-for="(item,index) in detail.coverList" :key="index">
							<image class="r4" :src="item.cover_url" mode="aspectFill"></image>
							<text @click="doRemoveCover(item.cover)" class="bgf6 cff fs16 r50 pb2 boxS del flexC flex flexJC">×</text>
						</view>
						<view @click="addCover" class="imgbox c99 r4 mb10 fs30 flexC flex flexJC">+</view>
					</view>
				</view>
			</view>
			<view class="bgff my12 pt5 pb24 fs13 aliC flex flexC flexW shadow">
				<view class="w-4 pt18" @click="goRoom">
					<image class="w36" src="/static/img/icon/room.png" mode="aspectFill"></image>
					<view class="mt4">包厢管理</view>
				</view>
				<view class="w-4 pt18" @click="goPackage">
					<image class="w36" src="/static/img/icon/taocan.png" mode="aspectFill"></image>
					<view class="mt4">套餐管理</view>
				</view>
				<view class="w-4 pt18" @click="goDevice">
					<image class="w36" src="/static/img/icon/shebei.png" mode="aspectFill"></image>
					<view class="mt4">设备管理</view>
				</view>
				<view class="w-4 pt18" @click="goClean">
					<image class="w36" src="/static/img/icon/daosao.png" mode="aspectFill"></image>
					<view class="mt4">打扫记录</view>
				</view>
				<view class="w-4 pt18" @click="goCharge">
					<image class="w36" src="/static/img/icon/chongzhi.png" mode="aspectFill"></image>
					<view class="mt4">充值套餐</view>
				</view>
				<view class="w-4 pt18" @click="goStaff">
					<image class="w36" src="/static/img/icon/yuangong.png" mode="aspectFill"></image>
					<view class="mt4">员工管理</view>
				</view>
			</view>
			<!-- <view class="flex flexC flexJC py20">
				<view class="aliC py12 w-17 bg41 r40">保存</view>
			</view> -->
		</view>

		<uni-popup ref="statusPop" type="bottom">
			<view class="popup-content2">
				<button class="popup-btn button" @click="updateStatus(2)" >营业中</button>
				<view class="popup-btn" @click="updateStatus(1)">试营业</view>
				<view class="popup-btn" @click="updateStatus(3)">筹备中</view>
				<view class="popup-btn" @click="updateStatus(4)">休息中</view>
				
				<view class="popup-btn" @click="$refs.statusPop.close()">取消</view>
			</view>

		</uni-popup>
		
		
		<uni-popup ref="cleanPop" type="bottom">
			<view class="popup-content2">
				<button class="popup-btn button" @click="updateCleanStatus(1)" >可预订</button>
				<view class="popup-btn" @click="updateCleanStatus(-1)">不可预订</view>
				
				<view class="popup-btn" @click="$refs.cleanPop.close()">取消</view>
			</view>
		
		</uni-popup>
		
		<uni-popup ref="tagPop" type="bottom">
			<view class="popup-content2">
				<button class="popup-btn button" @click="doDelTag()" >删除</button>
				
				<view class="popup-btn" @click="$refs.tagPop.close()">取消</view>
			</view>
		
		</uni-popup>
		
		
		<uni-popup ref="statusPop" type="bottom">
			<view class="popup-content2">
				<button class="popup-btn button" @click="updateStatus(2)" >营业中</button>
				<view class="popup-btn" @click="updateStatus(1)">试营业</view>
				<view class="popup-btn" @click="updateStatus(3)">筹备中</view>
				<view class="popup-btn" @click="updateStatus(4)">休息中</view>
				
				<view class="popup-btn" @click="$refs.statusPop.close()">取消</view>
			</view>
		
		</uni-popup>
		
		<hFormAlert v-if="tagShow"  title="添加标签" placeholder="请输入添加标签" @confirm="confirm" @cancel="cancel"></hFormAlert>

	</view>
</template>

<script>
	import hFormAlert from '@/components/h-form-alert/h-form-alert.vue';
	
	export default {
		components: {hFormAlert},
		
		data() {
			return {
				id: '',
				detail: null,
				tagShow:false,
				currentTag:'',
				codeUrl:'',
				chargeCodeUrl:''
			
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.getCodeUrl();
			this.getCharegeCodeUrl();
		},

		onShow() {
			this.getDetail();
		},
		methods: {
			
			lookChargeCode(){
				let image = Array();
				image.push(this.chargeCodeUrl);
				uni.previewImage({
					urls: image,
				});
			},
			
			lookCode(){
				let image = Array();
				image.push(this.codeUrl);
				uni.previewImage({
					urls: image,
				});
			},
			
			
			getCharegeCodeUrl(){
				let that = this;
				let param = {
					shop_id:this.id
				}
				this.$api.getShopChargeCodeUrl(param).then(res => {
				
					if (res.code == 1) {
						that.chargeCodeUrl = res.data;
					} else {
				
					}
				})
				
			},
		
			getCodeUrl(){
				let that = this;
				let param = {
					shop_id:this.id
				}
				this.$api.getShopCodeUrl(param).then(res => {
				
					if (res.code == 1) {
						that.codeUrl = res.data;
					} else {
				
					}
				})
				
			},
			
			bindDoor(type){
				
				uni.navigateTo({
					url:'/other/device/bindDoorDevice?selectShop='+JSON.stringify(this.detail)+"&room_id="+type
				})
			},
			
			goStaff(){
				uni.navigateTo({
					url:'/other/staff/staff?selectShop='+JSON.stringify(this.detail)
				})
			},
			
			goCharge(){
				uni.navigateTo({
					url:'/other/recharge/list?selectShop='+JSON.stringify(this.detail)
				
				})
			},
			
			goClean(){
				uni.navigateTo({
					url:'/other/staff/index?selectShop='+JSON.stringify(this.detail)
				})
			},
			
			goDevice(){
				uni.navigateTo({
					url:'/other/device/device?selectShop='+JSON.stringify(this.detail)
				})
			},
			
			goRoom(){
			
				uni.navigateTo({
					url:'/pages/room/index?selectShop='+JSON.stringify(this.detail)
				})
			},
			goPackage(){
				uni.navigateTo({
					url:'/pages/package/index?selectShop='+JSON.stringify(this.detail)
				})
			},
			
			delTag(item){
				this.currentTag = item;
				this.$refs.tagPop.open();
			},
			
			doRemoveCover(item){
				let that = this;
				let param = {
					cover:item,
					shop_id:this.id
				}
				this.$api.removeCover(param).then(res => {
				
					if (res.code == 1) {
						that.getDetail();
					} else {
				
					}
				})
				
			},
			
			
			doDelTag(){
				this.$refs.tagPop.close();
				let that = this;
				let param = {
					tag:this.currentTag,
					shop_id:this.id
				}
				this.$api.removeTag(param).then(res => {
				
					if (res.code == 1) {
						that.getDetail();
					} else {
				
					}
				})
				
			},
			
			confirm(e){
				this.tagShow = false;
				console.info(e.text);
				let that = this;
				let param = {
					tag:e.text,
					shop_id:this.id
				}
				this.$api.updateShopDetail(param).then(res => {
				
					uni.hideLoading();
					if (res.code == 1) {
						that.getDetail();
					} else {
				
					}
				})
			},
			
			addTag(){
				this.tagShow = true;
			},
			
			cancel(){
				this.tagShow = false;
			},
			
			updateLogo(){
				let that = this;
				this.uploadType = "image";
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["camera", "album"], //从相册选择
					success: function(res) {
						//console.log(JSON.stringify(res.tempFilePaths));
						let images = res.tempFilePaths; //非APP平台不支持自定义压缩,暂时没有处理,可通过uni-app上传组件的sizeType属性压缩
						for (var i = 0; i < images.length; i++) {
							let tImg = images[i];
							that.upload(tImg,'logo');
						}
					}
				});
			},
			
			updateWx(){
				let that = this;
				this.uploadType = "image";
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["camera", "album"], //从相册选择
					success: function(res) {
						//console.log(JSON.stringify(res.tempFilePaths));
						let images = res.tempFilePaths; //非APP平台不支持自定义压缩,暂时没有处理,可通过uni-app上传组件的sizeType属性压缩
						for (var i = 0; i < images.length; i++) {
							let tImg = images[i];
							that.upload(tImg,'wx_code');
						}
					}
				});
			},
			
			addCover(){
				let that = this;
				this.uploadType = "image";
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["camera", "album"], //从相册选择
					success: function(res) {
						//console.log(JSON.stringify(res.tempFilePaths));
						let images = res.tempFilePaths; //非APP平台不支持自定义压缩,暂时没有处理,可通过uni-app上传组件的sizeType属性压缩
						for (var i = 0; i < images.length; i++) {
							let tImg = images[i];
							that.upload(tImg,'cover');
						}
					}
				});
			},
			
			
			upload(img,type) {
			
				let that = this;
				uni.showLoading({
					title:"上传中"
				})
				uni.uploadFile({
					url: this.$uploadUrl,
					filePath: img,
					name: 'file',
					success: (uploadFileRes) => {
			
						uni.hideLoading();
						var res = uploadFileRes.data;
			
						// 根据接口具体返回格式   赋值具体对应url
						var url = JSON.parse(res).data.fullurl;
						var uploadUrl = JSON.parse(res).data.url;
						if(type == 'logo'){
							that.requestUpdateLogo(uploadUrl);
						}else if(type == 'wx_code'){
							that.requestUpdateWx(uploadUrl);
							
						}else{
							that.requestUpdateCover(uploadUrl);
						}
					}
				});
			
			},
			
			requestUpdateCover(logoUrl){
				
				let that = this;
				let param = {
					cover:logoUrl,
					shop_id:this.id
				}
				this.$api.updateShopDetail(param).then(res => {
				
					uni.hideLoading();
					if (res.code == 1) {
						that.getDetail();
					} else {
				
					}
				})
			},
			
			requestUpdateLogo(logoUrl){
				
				let that = this;
				let param = {
					logo:logoUrl,
					shop_id:this.id
				}
				this.$api.updateShopDetail(param).then(res => {
				
					uni.hideLoading();
					if (res.code == 1) {
						that.getDetail();
					} else {
				
					}
				})
			},
			
			
			requestUpdateWx(logoUrl){
				
				let that = this;
				let param = {
					wx_code:logoUrl,
					shop_id:this.id
				}
				this.$api.updateShopDetail(param).then(res => {
				
					uni.hideLoading();
					if (res.code == 1) {
						that.getDetail();
					} else {
				
					}
				})
			},
			
			
			updateCleanStatus(type){
				this.$refs.cleanPop.close();
				let that = this;
				let param = {
					is_clean_book:type,
					shop_id:this.id
				}
				this.$api.updateShopDetail(param).then(res => {
				
					if (res.code == 1) {
						that.getDetail();
					} else {
				
					}
				})
			},
			
			
			/**
			 * 更改状态
			 */
			updateStatus(s){
				
				this.$refs.statusPop.close();
				let that = this;
				let param = {
					status:s,
					shop_id:this.id
				}
				this.$api.updateShopDetail(param).then(res => {
				
					if (res.code == 1) {
						that.getDetail();
					} else {
				
					}
				})
			},
			

			chooseLocation() {
				let that = this;
				uni.chooseLocation({
					type: 'gcj02',
					success: function(res) {
						console.info(res);
						if (res.errMsg == 'chooseLocation:ok') {
							var lat = res.latitude;
							var lng = res.longitude;
							var address = res.address;
							uni.navigateTo({
								url: '../shop/updateInput?key=address' + "&value=店铺地址" + "&lat=" +
									lat + "&lng=" + lng + "&content=" + address + "&shop_id=" + that.id
							})
						}
					},
					fail: function(res) {
						console.info(res)
					}
				})
			},

			clickUpdate(item, content) {

				var key = "name";
				var value = "店铺名字"
				if (item == 'name') {
					var key = "name";
					var value = "店铺名字"
				} else if (item == 'tel') {
					var key = "tel";
					var value = "客服电话"
				}else if(item == 'is_charge_tip'){
					var key = "is_charge_tip";
					var value = "是否强制弹出充值框"
				}
				let that = this;

				uni.navigateTo({
					url: '../shop/updateInput?key=' + key + "&value=" + value + "&content=" + content +
						"&shop_id=" + that.id
				})
			},

			getDetail() {
				let param = {
					shop_id: this.id
				};
				let that = this;
				this.$api.getShopDetail(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.detail = res.data;
					} else {

					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		.w48 {
			width: 96rpx;
			height: 96rpx;
		}

		.w36 {
			width: 72rpx;
			height: 72rpx;
		}

		.imgbox {
			width: 164rpx;
			height: 164rpx;
			background-color: #E8E8E8;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.del {
				width: 36rpx;
				height: 36rpx;
				background: rgba(181, 180, 180, .8);
				position: absolute;
				top: -12rpx;
				right: -12rpx;
			}
		}


	}


	.popup-content2 {
		background: #FFFFFF;

		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}

		.button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
			font-size: 11pt;
		}

		button::after {
			border: none;
		}

		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}
</style>
